<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <script>if (window !== top) top.location.replace(location.href);</script>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="icon" href="${ctxPath}/assets/images/favicon.ico">
    <title>哈尔滨麻将快速计算平台</title>
    <link rel="stylesheet" href="${ctxPath}/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/admin.css">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="layui-row">
    <div class="layui-col-sm3">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
    <div class="layui-col-sm6">
        <h1 class="site-h1" id="title" style="text-align: center;padding-left: 15%;padding-top: 25%;"></h1>
        <form class="layui-form" style="margin-top: 25%;" id="form1"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
            <div class="layui-form-item">
                <label class="layui-form-label">赢家</label>
                <div class="layui-input-block">
                    <input type="radio" name="player" value="${session.dong}" lay-verify="otherReq" class="dong">
                    <input type="radio" name="player" value="${session.xi}" lay-verify="otherReq" class="xi">
                    <input type="radio" name="player" value="${session.nan}" lay-verify="otherReq" class="nan">
                    <input type="radio" name="player" value="${session.bei}" lay-verify="otherReq" class="bei">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">胡牌方式</label>
                <div class="layui-input-block">
                    <input type="radio" name="hu" lay-filter="hu"  lay-verify="otherReq"  value="1" title="小胡">
                    <input type="radio" name="hu" lay-filter="hu"  lay-verify="otherReq"  value="2" title="自摸">
                    <input type="radio" name="hu" lay-filter="hu"  lay-verify="otherReq"  value="3" title="宝">
                    <input type="radio" name="hu" lay-filter="hu"  lay-verify="otherReq"  value="4" title="点炮" id="dianpao">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">翻倍</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="fanbei" title="一坎" value="2" lay-skin="primary">
                    <input type="checkbox" name="fanbei" title="两坎" value="4" lay-skin="primary">
                    <input type="checkbox" name="fanbei" title="三坎" value="8" lay-skin="primary" >
                    <input type="checkbox" name="fanbei" title="夹"   value="2" lay-skin="primary" >
                    <input type="checkbox" name="fanbei" title="站立"  value="2" lay-skin="primary">
                    <input type="checkbox" name="fanbei" title="七小对" value="7" lay-skin="primary">
                </div>
            </div>
            <div class="layui-form-item" style="display:none" id="dianpaodiv">
                <label class="layui-form-label">炮手</label>
                <div class="layui-input-block">
                    <input type="radio" name="diaopao" value="${session.dong}" class="dong">
                    <input type="radio" name="diaopao" value="${session.xi}"  class="xi">
                    <input type="radio" name="diaopao" value="${session.nan}"  class="nan">
                    <input type="radio" name="diaopao" value="${session.bei}"  class="bei">
                </div>
            </div>
            <div class="layui-form-item" >
                <label class="layui-form-label">明杠</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="ming" value="${session.dong}" title="${session.dong}"  class="dong" lay-skin="primary">
                    <input type="checkbox" name="ming" value="${session.xi}"   title="${session.xi}"  class="xi" lay-skin="primary">
                    <input type="checkbox" name="ming" value="${session.nan}"  title="${session.nan}"  class="nan" lay-skin="primary">
                    <input type="checkbox" name="ming" value="${session.bei}"  title="${session.bei}"  class="bei" lay-skin="primary">
                </div>
            </div>
            <div class="layui-form-item" >
                <label class="layui-form-label">暗杠</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="an" value="${session.dong}" title="${session.dong}" class="dong"  lay-skin="primary">
                    <input type="checkbox" name="an" value="${session.xi}"  title="${session.xi}"  class="xi"  lay-skin="primary">
                    <input type="checkbox" name="an" value="${session.nan}" title="${session.nan}"  class="nan"  lay-skin="primary">
                    <input type="checkbox" name="an" value="${session.bei}" title="${session.bei}"  class="bei"  lay-skin="primary">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn"  lay-submit=""lay-filter="jiesuan">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
            <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
        </form>


        <table class="layui-table" lay-size="lg" style="margin-top: 10%" id="table">
        </table>
    </div>


    <div class="layui-col-sm3">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
</div>

<script src="${ctxPath}/assets/libs/layui/layui.js"></script>
<script src="${ctxPath}/assets/js/common.js"></script>
<script>
    layui.use(['layer', 'element', 'admin', 'index', 'laytpl', 'element', 'notice', 'xnUtil', 'form' , 'table'], function () {
        var $ = layui.jquery;
        var admin = layui.admin;
        var index = layui.index;
        var laytpl = layui.laytpl;
        var element = layui.element;
        var xnUtil = layui.xnUtil;
        var form = layui.form;
        var layer = layui.layer;
        var table = layui.table;
        var count = "${count}";

        //自定义验证规则
        form.verify({
            otherReq: function(value,item){
                var $ = layui.$;
                var verifyName=$(item).attr('name')
                    , verifyType=$(item).attr('type')
                    ,formElem=$(item).parents('.layui-form')//获取当前所在的form元素，如果存在的话
                    ,verifyElem=formElem.find('input[name='+verifyName+']')//获取需要校验的元素
                    ,isTrue= verifyElem.is(':checked')//是否命中校验
                    ,focusElem = verifyElem.next().find('i.layui-icon');//焦点元素
                if(!isTrue || !value){
                    //定位焦点
                    focusElem.css(verifyType=='radio'?{"color":"#FF5722"}:{"border-color":"#FF5722"});
                    //对非输入框设置焦点
                    focusElem.first().attr("tabIndex","1").css("outline","0").blur(function() {
                        focusElem.css(verifyType=='radio'?{"color":""}:{"border-color":""});
                    }).focus();
                    return '必填项不能为空';
                }
            }
        });

        var dong = new Object();
        var xi = new Object();
        var nan = new Object();
        var bei = new Object();

         dong.name = '${session.dong}';
         xi.name = '${session.xi}';
         nan.name = '${session.nan}';
         bei.name = '${session.bei}';

        $(".dong").attr("title",dong.name);
        $(".xi").attr("title",xi.name);
        $(".nan").attr("title",nan.name);
        $(".bei").attr("title",bei.name);
        form.render("radio");

        dong.score = 0;
        xi.score = 0;
        nan.score = 0;
        bei.score = 0;

        form.on("submit(jiesuan)",function(data) {

            var ming = new Array();
            var an = new Array();
            $("input:checkbox[name='ming']:checked").each(function(index) { // 遍历name=standard的多选框
                ming[index] =  $(this).attr('class');
            });
            $("input:checkbox[name='an']:checked").each(function(index) { // 遍历name=standard的多选框
                an[index] = $(this).attr('class');
            });
/*            if (ming.length!==0){
                ming = ming.substring(0, ming.length - 1);
            }
            if (an.length!==0){
                an = an.substring(0, an.length - 1);
            }*/
            var person = [dong,xi,nan,bei];
            var score = 0;
            var mark = data.field.hu;
            console.log(ming);
            for (var i = 0; i < person.length; i++) {
                if (person[i].name==(data.field.player)){
                    $("input:checkbox[name='fanbei']:checked").each(function(i){
                        data.field.hu = data.field.hu * $(this).val();
                    });
                    console.log(data.field.hu);
           /*         var mingparams = {
                        ming:ming
                    };
                    var anparams = {
                        an:an
                    };*/
                    score = data.field.hu;
                    var position = $("input:radio[name='player']:checked").attr('class');
                    console.log(mark!== 4);
                    if (mark !== '4') {

                        admin.req(getProjectUrl() + "score/jiesuan", JSON.stringify({
                            score: score,
                            position: position,
                            session: count - 1,
                            ming:ming,
                            an:an
                        }), function () {
                            layer.load(1);
                            tableIns.reload();
                        }, 'post');

                    }else {
                        var dianpao = $("input:radio[name='diaopao']:checked").attr('class');
                        admin.req(getProjectUrl() + "score/diaopao", JSON.stringify({
                            score: score,
                            position: position,
                            session: count - 1,
                            dianpao: dianpao,
                            ming: ming,
                            an: an
                        }), function () {
                            layer.load(1);
                            tableIns.reload();
                        }, 'post');

                    }
                }
            }
           $("#form1")[0].reset();
            form.render();
        });

/*
        console.log(count);
*/
        var tableIns = table.render({
            elem: '#table'
            ,url:  getProjectUrl() + "score/page?session="  + (count-1)
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,limit: 10000
            ,height: 432
            ,cols: [[
                {field: 'id', hide: true}
                , {field: 'dong', align: 'center', title: dong.name}
                , {field: 'xi', align: 'center', title: xi.name}
                , {field: 'nan', align: 'center', title: nan.name}
                , {field: 'bei', align: 'center', title: bei.name}
            ]]
        });


  /*      form.on('radio', function(data) {
            if (data.elem.id === "dianpao"){
                $("#dianpaodiv").css("display", "block");
            }
        });*/
        form.on('radio(hu)', function (data) {
            if( data.value=='4'){　　　　　　//判断当前多选框是选中还是取消选中
                console.log(data);
                $("#dianpaodiv").css("display", "block");
            }else{
                console.log(data);
                $("#dianpaodiv").css("display", "none");
            }
            var value = data.value;   //  当前选中的value值
        });
        /*
                form.on('submit(addPlayer)',function (data) {
                    admin.req(getProjectUrl() + "sysUser/add", JSON.stringify(data.field), function(res){
                        layer.load(2);
                        layer.msg(res.message, {icon: 1, time: 1000}, function () {
                        });
                    }, 'post');
                })


                form.on('submit(aaa)',function(data){
                    data.field.session = "${count}";
                    admin.req(getProjectUrl() + "/session/add", JSON.stringify(data.field), function(res){
                        layer.load(2);
                        layer.msg(res.message, {icon: 1, time: 1000}, function () {
                        });
                    }, 'post');
                    location.href = getProjectUrl() + "mahjong";
                })

                admin.req(getProjectUrl() + 'sysUser/page', function (res) {
                    console.log(res);
                    for (let i = 0; i < res.data.length; i++) {
                        $("[name='dong']").append("<option value=\"" + res.data[i].name + "\">" + res.data[i].name + "</option>");
                        $("[name='xi']").append("<option value=\"" + res.data[i].name + "\">" + res.data[i].name + "</option>");
                        $("[name='nan']").append("<option value=\"" + res.data[i].name + "\">" + res.data[i].name + "</option>");
                        $("[name='bei']").append("<option value=\"" + res.data[i].name + "\">" + res.data[i].name + "</option>");
                    }
                    form.render("select");
                })



                var count = "${count}";
                var topcontent = "第" + count + "届欧米杯麻将大赛";
                $("#title").html(topcontent);*/
    });
</script>
</body>
</html>
